<template>
  <div class="userlist">
    <div class="search">
      <div class="left">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button
          plain
          icon="el-icon-search"
          class="btn1"
          @click="LookFor"
        ></el-button>
      </div>

      <el-button type="primary" class="btn2" @click="dialogVisible = true"
        >添加用户</el-button
      >
    </div>
    <div>
      <el-table :data="users" border style="width: 100%">
        <el-table-column prop="id" label="用户id" >
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="mobile" label="电话" >
        </el-table-column>
        <el-table-column prop="role_name" label="角色" >
        </el-table-column>
        <el-table-column prop="mg_state" label="状态" >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="changeStatus($event, scope.row, scope.$index)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-button
                class="btn3"
                type="primary"
                icon="el-icon-edit"
                @click="xiugaiyonghu($event, scope.row, scope.$index)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                class="btn3"
                type="danger"
                icon="el-icon-delete"
                @click="deleteInfo($event, scope.row, scope.$index)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
            >
              <el-button
                class="btn3"
                type="warning"
                icon="el-icon-s-tools"
                @click="fprole(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="fenye"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 3, 4, 6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加用户弹出层 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="30%"
      class="logtitle"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="user" label="用户名">
          <el-input
            type="text"
            class="ipt"
            v-model="ruleForm.user"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="pass" label="密码">
          <el-input
            type="password"
            class="ipt"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="email" label="邮箱">
          <el-input
            type="text"
            class="ipt"
            v-model="ruleForm.email"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="phone" label="手机号">
          <el-input
            type="text"
            class="ipt"
            v-model="ruleForm.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUsers('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 编辑用户弹出层 -->

    <el-dialog
      title="修改用户"
      :visible.sync="xiugai"
      width="30%"
      class="logtitle"
    >
      <el-form
        :model="xiugaiForm"
        status-icon
        :rules="rules"
        ref="xiugaiForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="user" label="用户名">
          <el-input
            type="text"
            class="ipt"
            v-model="xiugaiForm.username"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item prop="email" label="邮箱">
          <el-input
            type="text"
            class="ipt"
            v-model="xiugaiForm.email"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item prop="phone" label="手机号">
          <el-input
            type="text"
            class="ipt"
            v-model="xiugaiForm.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="xiugai = false">取 消</el-button>
        <el-button type="primary" @click="xiugaidongxi">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配角色弹出层 -->
    <el-dialog
      title="分配角色"
      :visible.sync="fenpei"
      width="30%"
      class="logtitle"
    >
      <div class="userrole">
        <span>当前用户:&nbsp;&nbsp;&nbsp;{{ userinfo.username }}</span>
        <span>当前角色:&nbsp;&nbsp;&nbsp;{{ userinfo.role_name }}</span>
        <span
          >新的角色：
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in roleLists"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option> </el-select
        ></span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="fenpei = false">取 消</el-button>
        <el-button type="primary" @click="fenpeidongxi">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUser,
  ChangeUser,
  addUser,
  DeleteUser,
  SearchUser,
  reviseUser,
  userRole,
  getRole,
} from "../../api";
export default {
  name: "UserList",
  data() {
    return {
      ruleForm: {
        pass: "",
        user: "",
        email: "",
        phone: "",
      },
      xiugaiForm: {
        id: "",
        username: "",
        email: "",
        mobile: "",
      },
      value: "",
      roleLists: [],
      userId: "",
      userinfo: {},
      input: "",
      users: [],
      currentPage4: 1,
      total: 0,
      pageSize: 2,
      pageNum: 1,
      dialogVisible: false,
      xiugai: false,
      fenpei: false,
      rules: {
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, message: "长度在最少5个字符", trigger: "blur" },
        ],
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, message: "长度在 最少 3 个字符", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
    };
  },

  created() {
    getUser(this.pageNum, this.pageSize).then((res) => {
      this.users = res.data.data.users;
      this.total = res.data.data.total;
    });
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      getUser(this.pageNum, this.pageSize).then((res) => {
        this.users = res.data.data.users;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      getUser(this.pageNum, this.pageSize).then((res) => {
        this.users = res.data.data.users;
        this.total = res.data.data.total;
      });
    },

    //改变状态
    changeStatus(event, row, index) {
      let uid = row.id;
      let disable = row.mg_state;
      ChangeUser(uid, disable).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: "error",
          });
        }
      });
    },

    //添加用户
    addUsers(formName) {
      this.dialogVisible = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { user, pass, email, phone } = this.ruleForm;
          addUser(user, pass, email, phone).then((res) => {
            if (res.data.meta.status == 201) {
              getUser(this.pageNum, this.pageSize).then((res) => {
                this.users = res.data.data.users;
                this.total = res.data.data.total;
              });
              this.$message({
                message: res.data.meta.msg,
                type: "success",
              });
            }
          });
        }
      });
    },

    //删除用户
    deleteInfo(event, row, index) {
      let uid = row.id;
      DeleteUser(uid).then((res) => {
        if (res.data.meta.status == 200) {
          getUser(this.pageNum, this.pageSize).then((res) => {
            this.users = res.data.data.users;
            this.total = res.data.data.total;
          });
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
        }
      });
    },

    //搜索
    LookFor() {
      if (this.input) {
        SearchUser(this.input).then((res) => {
          if (res.data.meta.status == 200) {
            this.$message({
              message: res.data.meta.msg,
              type: "success",
            });
            this.users = [res.data.data];
            this.total = 1;
          } else {
            this.$message({
              message: res.data.meta.msg.message,
              type: "error",
            });
          }
        });
      } else {
        getUser(this.pageNum, this.pageSize).then((res) => {
          this.users = res.data.data.users;
          this.total = res.data.data.total;
        });
      }
    },

    //修改
    xiugaiyonghu(event, row, index) {
      this.xiugai = true;

      this.xiugaiForm = row;
    },
    xiugaidongxi() {
      console.log(this.pageSize, this.pageNum);
      this.xiugai = false;
      const { id, email, mobile } = this.xiugaiForm;
      reviseUser(id, email, mobile).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          getUser(this.pageNum, this.pageSize).then((res) => {
            this.users = res.data.data.users;
            this.total = res.data.data.total;
          });
        }
      });
    },

    //分配角色
    fprole(row) {
      this.userId = row.id;
      getRole().then((res) => {
        this.roleLists = res.data.data;
      });
      this.userinfo = row;
      this.fenpei = true;
    },
    fenpeidongxi() {
      console.log(this.value);
      userRole(this.userId, this.value).then((res) => {
       console.log(res.data.data)
        if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          getUser(this.pageNum, this.pageSize).then((res) => {
           
            this.users = res.data.data.users;
            this.total = res.data.data.total;
          });
        }
      });
      this.fenpei = false;
    },
  },
};
</script>

<style scoped lang="less">
.logtitle {
  text-align: left;
}
.fenye {
  height: 40px;
  background-color: #fff;
  display: flex;
  justify-content: left;
  align-items: center;
}
.search {
  display: flex;
  height: 32px;
  margin-bottom: 20px;
}
.left {
  width: 30%;
  display: flex;
  height: 32px;
  /deep/.el-input__inner {
    height: 32px;
  }
  .btn1 {
    color: #dcdfe6;
  }
  .btn1:hover,
  .btn1:target,
  .btn1:focus {
    border-color: #dcdfe6;
  }
}
.btn2 {
  width: 88px;
  margin-left: 20px;
}
.btn3 {
  width: 36px;
  height: 24px;
  padding: 0;
  margin: 0 5px 0 0;
  /deep/i {
    font-size: 12px;
  }
}
.userrole {
  display: flex;
  flex-direction: column;
  span {
    margin: 10px 0;
  }
}
</style>